/*
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-02-23 10:15:33
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-05-25 16:57:20
 * @FilePath: \cxl-h5\src\components\banner\index.ts
 */
import { reactive, Ref, ref } from 'vue'
import img1 from '@/assets/images/picture_ckzn01@2x.png'
import img2 from '@/assets/images/picture_ckzn02@3x.png'
import img3 from '@/assets/images/picture_ckzn03@3x.png'
import img4 from '@/assets/images/picture_ckzn04@3x.png'

const list = [
    {
        img: img1,
        text: '小贺想要卖掉自己的车'
    },
    {
        img: img2,
        text: '他上【长三角车生活】公众号进行车况检测，了解车的基本情况'
    },
    {
        img: img3,
        text: '他到门店去交易时，二手车交易人员向他描述的与【长三角车生活】一样'
    },
    {
        img: img4,
        text: '他出售了自己的车并向店员及朋友推荐【长三角车生活】，一款值得信赖、专业的平台'
    }
]

class Banner {
    list: any[]
    moveX = ref(0) //滑动的距离
    startX = ref(0) //开始的位置
    isMove = ref(false) //是否可以滑动
    distance = 100
    index = ref(0) //当前轮播图显示的下标
    duration = ref(0)
    defaultDuration = ref(1)
    windowWidth = ref(0)
    timer: any
    constructor() {
        this.list = reactive(list)
        this.copy()
    }
    copy() {
        const arr = JSON.parse(JSON.stringify(this.list))
        this.list = this.list.concat(arr, arr)
        this.index.value = arr.length

        // this.autoplay()
    }
    onTouchStart = (e: TouchEvent) => {
        this.startX.value = e.targetTouches[0].clientX
        this.isMove.value = true
        this.moveX.value = 0
        if (this.timer) {
            clearInterval(this.timer)
        }
    }
    onTouchMove = (e: TouchEvent) => {
        if (this.isMove) {
            this.moveX.value = e.targetTouches[0].clientX - this.startX.value
        }
        //console.log('move x:', this)
    }
    onTouchEnd = (e?: TouchEvent) => {
        //console.log('end x:', e)
        this.isMove.value = false
        if (this.moveX.value >= this.distance) {
            this.index.value--
            this.duration.value = (this.defaultDuration.value * Math.abs(this.moveX.value)) / this.windowWidth.value
            this.moveX.value = 0
            console.log('左滑-1', this.index, this.list.length / 3)
        } else if (this.moveX.value <= -this.distance) {
            this.index.value++
            this.duration.value = (this.defaultDuration.value * Math.abs(this.moveX.value)) / this.windowWidth.value
            this.moveX.value = 0
            console.log('右滑+1', this.index, (this.list.length / 3) * 2)
        } else {
            console.log('恢复原位')
            this.duration.value = (this.defaultDuration.value * Math.abs(this.moveX.value)) / this.windowWidth.value
            this.moveX.value = 0
        }
        this.setIndex()
        // this.autoplay()
    }

    setIndex = () => {
        if (this.index.value == (this.list.length / 3) * 2 + 1) {
            this.index.value = this.list.length / 3
            this.duration.value = 0
        } else if (this.index.value == this.list.length / 3 - 2) {
            this.index.value = (this.list.length / 3) * 2 - 1
            this.duration.value = 0
        }
    }

    onTransitionend = (e?: TransitionEvent) => {
        // console.log('onTransitionend', this.index)
        if (this.index.value == (this.list.length / 3) * 2) {
            this.index.value = this.list.length / 3
            this.duration.value = 0
        } else if (this.index.value == this.list.length / 3 - 1) {
            this.index.value = (this.list.length / 3) * 2 - 1
            this.duration.value = 0
        }
    }

    autoplay = () => {
        if (this.timer) {
            clearInterval(this.timer)
        }
        this.timer = setInterval(() => {
            this.index.value++
            this.duration.value = 0.5
            // console.log(this.index.value, this.list.length, (this.list.length / 3) * 2 + 1)
            if (this.index.value == (this.list.length / 3) * 2 + 1) {
                this.index.value = this.list.length / 3
                this.duration.value = 0
            } else if (this.index.value == this.list.length / 3 - 1) {
                this.index.value = (this.list.length / 3) * 2 - 1
                this.duration.value = 0
            }
        }, 3000)
    }

    addEvent = (ulRef: Ref<any>) => {
        //必须要绑定this 因为监听函数体内的this指向window
        ulRef.value?.addEventListener('touchstart', this.onTouchStart)
        ulRef.value?.addEventListener('touchmove', this.onTouchMove)
        ulRef.value?.addEventListener('touchend', this.onTouchEnd)
        ulRef.value?.addEventListener('transitionend', this.onTransitionend)
    }
    removeEvent = (ulRef: Ref<any>) => {
        ulRef.value?.removeEventListener('touchstart', this.onTouchStart)
        ulRef.value?.removeEventListener('touchmove', this.onTouchMove)
        ulRef.value?.removeEventListener('touchend', this.onTouchEnd)
    }

    onClickPoint = (index: number) => {
        console.log(index, this.list.length / 3)
        this.index.value = index + this.list.length / 3
        this.duration.value = 1
        this.setIndex()
    }
}
export default Banner
